<template>
  <div class="postmainbody">
    <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh" >
            <van-row class="topRow">
                <van-col class="imgCol" span="6">
                    <van-image round width="4rem" height="4rem" src="https://img.yzcdn.cn/vant/cat.jpeg" />
                </van-col>
                <van-col class="uNameCol" span="6">
                    <span class="uName">{{this.postMain.user.userName}}</span>
                </van-col>
                <van-col span="6"/>
                <van-col span="6">
                    <van-button class="reportBtn" type="danger"  @click="resportMain">举报</van-button>
                </van-col>
            </van-row>
            <div class="postContainer">
                <van-row>
                    <van-col span="24" class="postTittle">{{this.postMain.postTitle}}</van-col>
                </van-row>
                <van-divider/>
                <van-row>
                    <div class="postBody" v-html="this.postMain.postbody.body"></div>
                </van-row>
                <van-divider></van-divider>
            </div>
            <van-row>
                <van-col span="20">
                    <van-field
                    v-model="reply"
                    rows="2"
                    autosize
                    label="留言"
                    type="textarea"
                    maxlength="50"
                    placeholder="请输入留言"
                    show-word-limit
                    />
                </van-col>
                <van-col span="4">
                    <van-button class="submitReply" type="primary" @click="addReply">发表</van-button>
                </van-col>
            </van-row>
            <van-divider></van-divider>
            <van-list v-model="loading" :finished="finished" finished-text="没有更多评论了"  @load="onLoad">
                <van-swipe-cell v-for="item in replyList" :key="item.replyId" class="replyContainer">
                <van-row>
                    <van-col span="5" class="replyUserImgContrainer">
                        <van-image round width="3rem" height="3rem" src="https://img.yzcdn.cn/vant/cat.jpeg" />
                        <span class="userId">id:{{item.user.userName}}</span>
                    </van-col>
                    <van-col span="19" class="replyBodyContainer">
                        <div class="replyContent">{{item.replybody}}</div>
                    </van-col>
                    <p class="replyTime">回复时间： {{item.createTime}}</p>
                </van-row>
                <template #right>
                    <van-button class="reportBtn" type="danger"  @click="resportReply(item.replyId)">举报</van-button>
                </template>
                </van-swipe-cell>
            </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
    data() {
        return {
            postMain: {},
            replyList: [],
            queryInfo: {
                //当前页数
                pagenum: 1,
                //当前每页显示多少数据
                pagesize: 5
            },
            total: '',
            loading: false,
            finished: false,
            isLoading: false,
            reply: ''
        }
    },
    created() {
        this.getPostMain()
    },
    methods: {
        getPostMain() {
            this.postMain = this.$route.params.pt
            console.log(this.postMain)
        },
        async getReply() {
            const {data: res} = await this.$http.post("/api/post/getAllForOnePostMain",{pagenum:this.queryInfo.pagenum,pagesize:this.queryInfo.pagesize,postmainId: this.postMain.postmainId})
            if (res.code !== 200) {
                this.$toast('评论加载失败')
                return
            }
            if (res.data.records.length === 0) {  		// 判断获取数据条数若等于0
                this.finished = true;		// 停止加载
            }
            this.replyList.push(...res.data.records)//加载数据
            this.total = res.data.total //给数据条数赋值
            this.loading = false			// 加载状态结束 
            if (this.replyList.length >= res.data.total) {
                this.finished = true	// 结束加载状态
            }
            console.log(res.data)
        },
        onLoad() {
            console.log('加载评论')
            this.getReply()
            this.queryInfo.pagenum++
        },
        onRefresh() {
            this.queryInfo.pagenum = 1
            this.onLoad()
            this.replyList = []
            this.finished = false
            this.isLoading = false
        },
        async addReply() {
            if (this.reply=='') {
                this.$toast('评论不能为空')
                return
            }else {
                const {data: res} = await this.$http.put("/api/post/addReply",{postmainId:this.postMain.postmainId,replybody:this.reply})
                if (res.code !== 200) {
                    this.$toast('评论失败')
                    return
                }
                this.$toast('评论成功')
                this.reply= ''
                this.onRefresh()
            }
        },
        async resportMain() {
            const {data: res} = await this.$http.post("/api/post/updateOnePostMainReport",{postmainId: this.postMain.postmainId})
            if (res.code !== 200) {
                this.$toast('举报失败')
                return
            }
            this.$toast('举报成功')
        },
        async resportReply(id) {
            const {data: res} = await this.$http.post("/api/post/reportReply", {replyId: id})
            if (res.code !== 200) {
                this.$toast('举报失败')
                return
            }
            this.$toast('举报成功')
        }

    }
}
</script>

<style lang="less" scoped>
.postmainbody {
    background-color: whitesmoke;
    margin-bottom: 50px;
}
.van-image {
    margin: 10px;
}
.topRow {
    height: 88px;
    .van-col {
        height: 88px;
        .uName {
           position: relative;
           top: 30px;
        }
        .reportBtn {
            left: 40%;
            height: 100%;
            width: 60%;
        }
    }
}
.pBody {
    margin-left: 16px;
}
.postTittle {
    font-size: 35px;
}
.submitReply {
    height: 88px;
}
.replyTime {
    font-size: 7px;
}
.reportBtn {
    height: 115px;
}
.postContainer {
    width: 100%;
    .postTittle {
        text-align: center;
        margin-left: 5px;
        margin-right: 5px;
        word-wrap: normal;
        word-break:break-all;
    }
    .postBody {
        width: 100%;
        margin-left: 5px;
        margin-right: 5px;
        word-wrap: normal;
        word-break:break-all;
    }
}
.replyContainer {
    .replyUserImgContrainer {
        text-align: center;
    }
}
.replyContent {
    display: block;
    margin: 5px,0,5px;
}
</style>